<template>
  <div id="board" class="flex flex-col text-white font-14">
    <kHeader />
    <div class="flex-1 flex content" style="height: calc(100-6vh) px">
      <div class="flex-2 box-content flex flex-col">
        <!-- <noReturnList
          class="flex-1"
          :data="info.noReturnTheChartsStatList || []"
        />
        <device :data="info.deviceStatVo" /> -->
        <template v-if="!loading">
          <autoList
            :data="info.toolInspectStatVoList || []"
            :columns="toolInspectStatVoList.columns"
            title="定检预警详情"
            class="flex-1"
          /><autoList
            :data="info.warnRecordStatVoList || []"
            :columns="warnRecordStatVoList.columns"
            title="门禁报警详情"
            class="flex-1"
          />
          <toolLogList
            :data="info.toolLendReturnLogStatVoList || []"
            class="flex-1"
          />
        </template>
      </div>
      <div class="flex-3 flex flex-col" style="margin: 0 0.83vw">
        <div class="flex">
          <toolStatus class="box-content mb-16 flex-1" :data="info" />
          <battery
            class="box-content mb-16 flex-1 ml-3"
            :data="info.facilityList"
          />
        </div>
        <div class="flex mb-4">
          <onlineStatus class="box-content mr-2 flex-2" :data="info" />
          <div class="flex-1 box-content">
            <toolStatisitics :data="info.toolLendReturnRecordsVo" />
          </div>
        </div>
        <dayChart
          ref="dayChartRef"
          class="box-content flex-1 mb-16"
          :data="info.dateStatList"
        />
        <hourChart
          ref="hourChartRef"
          class="box-content flex-1"
          :data="info.hourStatList"
        />
      </div>
      <div class="flex-2 box-content flex flex-col">
        <!-- <userChart
          v-if="info.userUseTheChartsStatList"
          ref="userChartRef"
          :data="info.userUseTheChartsStatList"
        /> -->
        <template v-if="info.facilityFrequencyStatVoList">
          <noReturnList
            :data="info.noReturnTheChartsStatList || []"
            class="flex-1"
          />
          <autoList
            :data="info.toolReportFixStatVoList"
            :columns="toolReportFixStatVoList.columns"
            title="工具报修详情"
            class="flex-1"
          />
          <facilityChart
            ref="facilityChartRef"
            :data="info.facilityFrequencyStatVoList"
          />
          <autoList
            title="紧缺工具在位情况"
            :data="info.toolScarceStatVoList"
            :columns="toolScarceStatVoList.columns"
            class="flex-1"
          />
        </template>

        <!-- <toolRanks
          v-if="info.toolLendTheChartsStatList"
          :data="info.toolLendTheChartsStatList"
          class="flex-1 flex flex-col"
        /> -->
      </div>
    </div>
  </div>
</template>

<script setup lang="ts">
import { onMounted, ref } from "vue";
import { useRoute } from "vue-router";
import kHeader from "./modules/kHeader.vue";
import {
  toolInspectStatVoList,
  warnRecordStatVoList,
  toolReportFixStatVoList,
  toolScarceStatVoList
} from "./data/listData";
/* 左侧 */
import noReturnList from "./modules/noReturnList.vue";
import device from "./modules/device.vue";
import toolLogList from "./modules/toolLogList.vue";
import autoList from "./components/auto-list.vue";
/* 中间 */
import toolStatus from "./modules/toolStatus.vue";
import battery from "./modules/battery.vue";
import onlineStatus from "./modules/onlineStatus.vue";
import dayChart from "./modules/dayChart.vue";
import hourChart from "./modules/hourChart.vue";
/* 右侧 */
import userChart from "./modules/userChart.vue";
import toolStatisitics from "./modules/toolStatisitics.vue";
import facilityChart from "./modules/facilityChart.vue";
import toolRanks from "./modules/toolRanks.vue";

import {
  toolLendReturnLogStats,
  toolFacilityUseStat,
  toolLendReturnFrequencyStats,
  theChartsStat,
  facilityStat,
  toolStat,
  warehouseConfig
} from "@/api/board";
import { join } from "path";

/* 数据 */
const info = ref({} as any);
const loading = ref(true);

const dayChartRef = ref(null);
const hourChartRef = ref(null);
const facilityChartRef = ref(null);

const route = useRoute();
const params = {
  warehouseId: route.query.warehouseId
};

const initData = async () => {
  loading.value = true;
  await Promise.all([
    toolFacilityUseStat(params),
    toolLendReturnLogStats(params),
    facilityStat(params),
    toolLendReturnFrequencyStats(params),
    theChartsStat(params),
    toolStat(params),
    warehouseConfig(params)
  ])
    .then(resArr => {
      // console.log(resArr);
      resArr.map(res => {
        info.value = { ...info.value, ...res.data };
      });
      // 如果有终端配置的剩余天数
      if (info.value.inspectCycleNoticeDays) {
        info.value.toolInspectStatVoList = handleToolInspectStatVoList(
          info.value.toolInspectStatVoList
        );
      }
      console.log("info", info.value);
    })
    .catch(() => (loading.value = false));
  loading.value = false;
  // 三个图表更新
  dayChartRef?.value?.initData();
  hourChartRef?.value?.initData();
  facilityChartRef?.value?.initData();
};
// 处理定检详情列表
const handleToolInspectStatVoList = (list: any) => {
  return list.filter((item: any) => {
    return info.value.inspectCycleNoticeDays >= item.remainingDays;
  });
};
onMounted(() => {
  initData();
  setInterval(
    () => {
      initData();
    },
    1000 * 60 * 5
  );
});

/* 测试数据 ================================================== */

// let userUseTheChartsStatList = [];
// for (let i = 0; i < 20; i++) {
//   userUseTheChartsStatList.push({
//     userNickName: `${i}小对`,
//     lendCount: i * 10
//   });
// }
// info.value = {
//   ...info.value,
//   userUseTheChartsStatList,
//   facilityFrequencyStatVoList: [
//     {
//       facilityId: "102699154355433472",
//       facilityName: "智能货架1",
//       lendcount: 12,
//       percent: 63.2
//     },
//     {
//       facilityId: "102699579859185664",
//       facilityName: "智能货架2",
//       lendcount: 6,
//       percent: 31.6
//     },
//     {
//       facilityId: "102699866195931136",
//       facilityName: "智能货架3",
//       lendcount: 1,
//       percent: 5.3
//     }
//   ],
//   dateStatList: [
//     { time: "2024-11-20", lendCount: 1022, returnCount: 1022 },
//     { time: "2024-11-19", lendCount: 244, returnCount: 204 },
//     { time: "2024-11-18", lendCount: 245, returnCount: 245 },
//     { time: "2024-11-17", lendCount: 400, returnCount: 401 },
//     { time: "2024-11-16", lendCount: 2, returnCount: 1 }
//   ],
//   hourStatList: [
//     { time: "11", lendCount: 1, returnCount: 1 },
//     { time: "12", lendCount: 0, returnCount: 19 },
//     { time: "14", lendCount: 160, returnCount: 120 },
//     { time: "08", lendCount: 80, returnCount: 80 },
//     { time: "09", lendCount: 601, returnCount: 601 },
//     { time: "10", lendCount: 180, returnCount: 201 }
//   ],
//   toolLendTheChartsStatList: [
//     { toolId: "116552532630089728", toolName: "加长杆", lendCount: 47 },
//     {
//       toolId: "116569409641164800",
//       toolName: "发动机换发工具箱",
//       lendCount: 47
//     },
//     { toolId: "116548563220475904", toolName: "扭矩扳手", lendCount: 47 },
//     { toolId: "116549065614209024", toolName: "大一字", lendCount: 47 },
//     { toolId: "116550165981474816", toolName: "方冲", lendCount: 47 },
//     { toolId: "116550683856384000", toolName: "铁榔头", lendCount: 47 },
//     { toolId: "116552155188867072", toolName: "反光镜", lendCount: 47 },
//     { toolId: "116557582790209536", toolName: "千分垫", lendCount: 47 },
//     { toolId: "116552818954252288", toolName: "套筒头", lendCount: 47 },
//     { toolId: "116553850807562240", toolName: "游标卡尺", lendCount: 47 },
//     { toolId: "116554185269751808", toolName: "小一字", lendCount: 47 },
//     { toolId: "116554502392688640", toolName: "转接器", lendCount: 47 },
//     { toolId: "116555016501112832", toolName: "套筒头", lendCount: 47 },
//     { toolId: "116555279752409088", toolName: "小一字", lendCount: 47 },
//     { toolId: "116567941919977472", toolName: "开口扳手", lendCount: 47 },
//     { toolId: "116557872633393152", toolName: "开口扳手", lendCount: 47 },
//     { toolId: "116558079366443008", toolName: "棘轮扳手", lendCount: 47 },
//     { toolId: "116558333801312256", toolName: "棘轮扳手", lendCount: 47 },
//     { toolId: "116558577188384768", toolName: "工装", lendCount: 47 },
//     { toolId: "116558736529993728", toolName: "工装", lendCount: 47 },
//     { toolId: "116559729707626496", toolName: "开口扳手", lendCount: 47 },
//     { toolId: "116560491456147456", toolName: "开口扳手", lendCount: 47 },
//     { toolId: "116560702979092480", toolName: "开口扳手", lendCount: 47 },
//     { toolId: "116561583178952704", toolName: "开口扳手", lendCount: 47 },
//     { toolId: "116561811202289664", toolName: "开口扳手", lendCount: 47 },
//     { toolId: "116561988994641920", toolName: "开口扳手", lendCount: 47 },
//     { toolId: "116562199787778048", toolName: "开口扳手", lendCount: 47 },
//     { toolId: "116562464804876288", toolName: "开口扳手", lendCount: 47 },
//     { toolId: "116562752244723712", toolName: "开口扳手", lendCount: 47 }
//   ],
//   toolUseStat: {
//     inStockCount: 212,
//     lendCount: 16
//   },
//   facilityUseStatList: [
//     {
//       type: "3",
//       onlineCount: 1
//     }
//   ],
//   facilityList: [
//     {
//       facilityId: "105997014345887746",
//       warehouseId: "1859505225054228482",
//       code: null,
//       name: "123",
//       categoryName: "电池柜",
//       networkState: "2",
//       ipAddr: "192.168.31.71",
//       macAddr: "",
//       maxLevel: null,
//       type: "6",
//       picUrl: null,
//       state: "1",
//       batteryInInventoryCount: 10,
//       batteryLendCount: 5,
//       warehouseName: null,
//       facilityCategoryName: null,
//       createTime: "2024-10-19 11:54:17"
//     },
//     {
//       facilityId: "105997014345887747",
//       warehouseId: "1859505225054228482",
//       code: null,
//       name: "123111",
//       categoryName: "电池柜",
//       networkState: "2",
//       ipAddr: "192.168.31.72",
//       macAddr: "",
//       maxLevel: null,
//       type: "6",
//       picUrl: null,
//       state: "1",
//       batteryInInventoryCount: 20,
//       batteryLendCount: 10,
//       warehouseName: null,
//       facilityCategoryName: null,
//       createTime: "2024-10-19 11:54:17"
//     }
//   ]
// };

/* 测试数据 ================================================== */
</script>

<style lang="scss">
@import url(./board.scss);
</style>
